<template>
    <main>
        <student-header/>
        <!--        说明-->
        <div class="description">
            本系统重点面向商业场景中常见数据图形的应用，通过进阶式的项目任务，帮助学员掌握根据不同分析目标和数据源，合理运用图形描述数据与分析业务的能力。
        </div>

        <!--        功能-->
        <div class="pushpin pointer" v-for="index in list" :style="index.style" @click="router.push({name:'StudentProjectSecond',query:{projectId:index.id}})">
            <span style="font-size: 16px">{{ index.title }}</span>
            <span style="font-size: 12px; color: #919DBF">{{ index.info }}</span>
            <img :src="index.image" alt="">
        </div>
    </main>
</template>

<script setup>
import {useUserStore} from "@/stores/user";
import router from "@/router";
import StudentHeader from "@/components/header/StudentHeader.vue";

const user = useUserStore()
const pushpin = (value) => {
    const val = `point${value}-on`
    return new URL(`/src/assets/student/image/${val}.png`, import.meta.url)
}
const list = [
    {
        title: "数据对比分析",
        info: "训练单组、多组数据在侧重对比不同维度时的图表和居维方法",
        image: pushpin(1),
        id:35,
        style: {
            bottom: "18vh",
            left: "22.5vw"
        }
    },
    {
        title: "时间趋势分析",
        info: "如何在体现数据趋势时，同时强调累积或特殊阶段",
        image: pushpin(2),
        id:36,
        style: {
            bottom: "28vh",
            left: "32.5vw"
        }
    },
    {
        title: "组成结构分析",
        info: "重点练习体现数据百分比和数据组成结构的图表方法",
        image: pushpin(3),
        id:37,
        style: {
            bottom: "41vh",
            left: "47vw"
        }
    },
    {
        title: "影响因素分析",
        info: "根据影响因素的数量和分析目标体现数据间的关系",
        image: pushpin(4),
        id:38,
        style: {
            bottom: "49vh",
            left: "60vw"
        }
    },
    {
        title: "数据分布分析",
        info: "根据不同的数据变量和分析目标体现数据分布和频率",
        image: pushpin(5),
        id:39,
        style: {
            bottom: "62vh",
            left: "67vw"
        }
    },
    {
        title: "文本处理分析",
        info: "将自然语言进行文本处理,并提取关键词和展现词频",
        image: pushpin(6),
        id:40,
        style: {
            bottom: "64vh",
            left: "76vw"
        }
    },

]
</script>

<style scoped lang="less">
main {
    position: relative;
    height: 100vh;
    background-size: 100% 100%;
    background-image: url("@/assets/student/image/可视化图文处理-home-bg.png");



    .description {
        position: absolute;
        top: 12%;
        left: 3%;
        width: 18vw;
        background-color: #242737;
        padding: 30px;
        border-radius: 10px;
        color: #8D99BA;
    }

    .pushpin {
        position: absolute;
        display: flex;
        flex-direction: column;
        width: 7vw;
        color: white;
        transition: 0.3s;
        &:hover {
            transform: translate(0, -10%);
        }
    }
}
</style>